<template>
	<view class="tn-padding tn-margin-top-sm">
		<view v-if="box === 'popup' ">
			<tn-popup v-model="showBox" mode="center" width="80%" :borderRadius="borderRadius">
				<view class="content">
					<view class="list-text">
						<view class="list__left">
							<text class="list__left__icon tn-icon-notice-fill"></text>
							<view class="list__left__text">系统提示</view>
						</view>
						<view class="list__right list-text__right">
							<tn-button @click=" showBox = false" class="dawn-btn-sm dawn-btn-sm__defult">
								<text class="tn-icon-close-fill">关闭</text>
							</tn-button>
						</view>
					</view>
					<view class="list__content">
						<view class="tn-flex tn-flex-row-center tn-flex-col-center">
							<text class="dawn-text-md" style="width: 95%;">{{ msg }}</text>
						</view>
					</view>
				</view>
			</tn-popup>
		</view>
		<view v-else-if="box === 'btn' " class="dawn-msg-empty">
			<image mode="aspectFit" class="dawn-msg-empty__image" src="../../static/images/icon_ondata.png"></image>
			<view class="dawn-msg-empty__title">
				{{ msg }}
			</view>
			<view class="dawn-msg-empty__btn">
				<tn-button @click="getPage()" class="dawn-btn-lg dawn-btn-lg__main">
					<text class="tn-icon-search-list-fill tn-padding-right-xs"></text>
					<text>预约挂号</text>
				</tn-button>
			</view>
			<view class="dawn-msg-empty__btn">
				<tn-button @click="getPage()" class="dawn-btn-lg dawn-btn-lg__main tn-margin-top-sm">
					<text class="tn-icon-search-list-fill tn-padding-right-xs"></text>
					<text>门诊缴费</text>
				</tn-button>
			</view>
		</view>
		<view v-else class="dawn-msg-empty">
			<view v-if="icon" class="dawn-msg-empty__icon" :class="[`tn-icon-${icon}`]"></view>
			<image v-else mode="aspectFit" class="dawn-msg-empty__image" src="../../static/images/icon_ondata.png"></image>
			<view class="dawn-msg-empty__title">
				{{ msg }}
			</view>
		</view>
	</view>
</template>

<script>
	import page_mixin from '@/mixins/page_mixin.js'
	import * as api from '@/api/api.js';
	import * as PatientApi from '@/api/hospital/patient.js';
	import dayjs from "@/plugin/dayjs/dayjs.min.js";
	import {
		mapGetters
	} from "vuex";
	const app = getApp();
	export default {
		name: 'dawn-msg',
		props: {
			// 距离底部的距离
			bottom: {
				type: [Number, String],
				default: 300
			},
			// 距离右边的距离
			right: {
				type: [Number, String],
				default: 30
			},
			zIndex: {
				type: [Number, String],
				default: 3000
			},
			borderRadius: {
				type: [Number, String],
				default: 20
			},
			// 提示信息
			msg: {
				type: String,
				default: ''
			},
			// 组件类型 tips、sheet、toast、notice、popup、modal
			box: {
				type: String,
				default: ''
			},
			// 组件类型 tips、sheet、toast、notice、popup、modal
			icon: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				showBox: true
			}
		},
		mounted() {
			// console.log("this.mounted")
		},
		methods: {
			chooseClick() {
				this.show = true;
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .tn-empty__text {
		margin-top: 0px !important;
	}

	.dawn-msg-empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 40vh;

		&__icon {
			font-size: 200rpx;
			color: $dawn-theme-color;
			font-weight: 0;
		}

		&__image {
			width: 50%;
			height: 50%;
			// height: 200rpx;
		}

		&__title {
			margin-top: 30rpx;
			font-size: $dawn-font-size-md;
			font-weight: bolder;
			color: $dawn-theme-color-dark;
		}

		&__text {
			font-size: $uni-font-size-base;
			color: $dawn-color-grey;
		}
		
		&__btn {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 30rpx;
			font-size: $dawn-font-size-md;
			font-weight: bolder;
			color: $dawn-theme-color-dark;
		}
	}

	.list-text {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx !important;
		border-bottom: 1px solid $dawn-theme-color-light;

		&__right {
			font-size: $dawn-font-size-md;
		}
	}

	.list-icon-text,
	.list-image-text {
		padding: 15rpx 20rpx;
		border-bottom: 1px solid $dawn-theme-color-light;
	}


	.list {
		font-size: $dawn-font-size-base;

		&__left {
			display: flex;
			align-items: center;
			justify-content: flex-start;

			&__icon,
			&__image {
				margin-right: 6rpx;
				font-size: $dawn-font-size-md + 2;
				font-weight: bolder;
				color: $dawn-theme-color-dark;
			}

			&__text {
				font-size: $dawn-font-size-md;
				color: $dawn-theme-color-dark;
				font-weight: bolder;
			}
		}

		&__content {
			padding: 40rpx 20rpx;
			margin-bottom: 10rpx;
		}

		&__right {
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
	}
</style>